<template>
  <div class="app-container">
    <!--巡检任务-->
    <el-card class="dis">
      <el-form :inline="true" :model="searchData" class="formHeight">
        <el-form-item label="">
          <el-input size="mini" placeholder="关键字：巡检标题" v-model="searchData.keyword"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      </el-card>

    <!--  列表  -->
    <el-card class="mt20">
      <el-table :data="tableData" size="mini">
        <el-table-column type="selection" align="center" width="55"/>
        <el-table-column label="任务编号" width="180" prop="task_num" align="center"/>
        <el-table-column label="工单编号" width="180" prop="work_num" align="center"/>
        <el-table-column label="开始时间" width="180"  prop="task_start" align="center"/>
        <el-table-column label="结束时间" width="180"  prop="task_end" align="center"/>
        <el-table-column label="任务状态" width="100" align="center">
          <template slot-scope="scope" align-center>
              <el-tag>{{scope.row.status_name}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="执行班组/人" prop="user_name" width="100" align="center"/>
        <el-table-column label="巡检标题"  width="100" prop="task_title" align="center"/>
        <el-table-column label="巡检内容" width="100" prop="task_content" align="center"/>
        <el-table-column label="累计用时" width="120"  prop="total_time" align="center"/>
        <el-table-column label="操作"  align="center">
          <!-- 自定义模板，slot.row即为当前行 -->
          <template slot-scope="scope" align-center>
            <el-button
              size="mini"
              type="primary"
               v-if="scope.row.is_work!==1"
              @click="generateList(scope.row.id)"
            >生成工单</el-button>
              <el-button
              size="mini"
              type="info"
               v-if="scope.row.is_work==1"
            >已转工单</el-button>

            <el-button type="primary" size="mini" @click="info(scope.row)">详情</el-button>
            <el-button type="primary" size="mini" @click="process(scope.row)">进度</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   分页   -->
<!--      <el-pagination-->
<!--        style="float: right;"-->
<!--        :page-size="searchData.limit"-->
<!--        :current-page="searchData.offset"-->
<!--        layout="total, prev, pager, next, jumper"-->
<!--        :total="total"-->
<!--        @current-change="handleCurrentChange"-->
<!--      />-->
      <pagination style='float: right;' v-show='total>0' :total='total' :page.sync='searchData.offset' :limit.sync='searchData.limit' @pagination='getList' />
    </el-card>
    <!-- 引入的详情弹窗组件 ref 为js中引用的名称 -->
    <inspection-task-info ref="inspectionTaskInfo"></inspection-task-info>
    <inspection-task-process ref="inspectionTaskProcess"></inspection-task-process>
     <el-button v-if="false" :plain="true" @click="open2">成功</el-button>

  </div>
</template>

<script>
import { spectionPlanTaskList } from '@/api/operations'
import { toWork } from '@/api/repair'

import InspectionTaskInfo from '@/views/operations/inspection/task/components/info'
import InspectionTaskProcess from '@/views/operations/inspection/task/components/process'

export default {
  name: 'index',
  components: { InspectionTaskInfo,InspectionTaskProcess},
  data() {
    return {
      searchData: {
        task_type: '1',
        limit: 10,
        offset: 0,
        keyword: ''
      },
      tableData: [],
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
           open2() {
        this.$message({
          message: '操作成功',
          type: 'success'
        });
      },
    // 查询列表
    getList() {
      // 调用接口js中的接口方法
      spectionPlanTaskList(this.searchData).then(res => {
        // debugger;
        this.tableData = res.data.plans
        this.total = res.data.total
      })
    },
    // 翻页的时候执行的方法
    handleCurrentChange(val) {
      // 页码赋值
      this.searchData.offset = val;
      // 调用查询方法
      this.getList();
    },
    // 查询
    search() {
      // 手动改变页面到第一页
      this.searchData.offset = 0;
      // 调用查询方法
      this.getList();
    },
  // 生成工单
    generateList(a){
      let data={
        id:a,
        type:'1'
      }
      toWork(data).then(res=>{
        if(res.code==200){
          this.getList()
          this.open2()

        }
      })
    },
    // 查看详情
    info(row) {
      // 打开弹窗
      this.$refs.inspectionTaskInfo.open(row);
    },
    // 查看进度
    process(row) {
      // 打开弹窗
      this.$refs.inspectionTaskProcess.open(row);
    }
  }
}
</script>

<style lang="scss" scoped>
  .dis{
    display: flex;
    justify-content: flex-start;
  }
  .mt20{
    margin-top: 20px;
  }
  .formHeight{
    height: 40px;
  }
</style>
